import React, { useReducer } from 'react'
// useReducer 用来操作复杂的数据

function reducer(state, action) {
    console.log('准备修改了')
    switch(action.type) {
        case "CHANGE_NAME":
            state.name = "李四"
            return { ...state }
        default:
            return state
    }
}

const userInfo = {
    name: "张三",
    age: 30,
    address: "北京"
}

export default function Reduer() {
    // state  状态
    // dispatch  修改状态

    // useReducer(reducer, initState)
    const [state, dispatch] = useReducer(reducer, userInfo)
    console.log(state)
    return (
        <div>
            <p>
                姓名: { state.name }
            </p>
            <p>
                年龄: { state.age }
            </p>
            <p>
                住址: { state.address }
            </p>
            <p>
                <button onClick={() => {
                    dispatch({ type: "CHANGE_NAME" })
                }}>修改姓名</button>
            </p>
        </div>
    )
}
